<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/jquery.js"></script>
        <script src="../js/axios.min.js"></script>
        <script src="../js/jquery.validate.min.js"></script>
        <script src="../js/layer.min.js"></script>
        <script
            src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.22.1/bootstrap-table-locale-all.js"></script>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.22.1/bootstrap-table.css"
            rel="stylesheet">

        <style>
                .table{
                    margin: 50px auto;
                }
                .num{
                    width: 30px;
                }
            </style>
    </head>
    <body>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>图片</th>
                    <th>名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>总金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tab">

            </tbody>
        </table>

        <script>
         axios.defaults.baseURL = 'http://60.204.218.206:8088/';

       //请求拦截
        axios.interceptors.request.use((config)=>{ 
            config.headers.token=localStorage.getItem("token")      
           return config;
         })

         axios({
            url:"/cart/getCart",
         }).then(function(res){
             console.log(res)     
             render(res.data.data)    
         })

         function render(data){
            let str=``
            data.forEach(el=>{
                str+=`<tr>
                    <td scope="row">${el.c_id}</td>
                    <td><img style="width:30px;height:30px" src='http://60.204.218.206:8088/${el.p_img}'></td>
                    <td>${el.p_name}</td>
                    <td>
                        <button class='sub'>-</button>
                        <input class='num' value=${el.p_number}>
                        <button class='add'>+</button>
                    </td>
                    <td>${el.p_price}</td>
                    <td>${el.p_total}</td>
                    <td><a class='del' c_id=${el.c_id}>删除</a></td>
                </tr>
                `
            })
            $("#tab").html(str)
        }
        $(function(){
            $("#tab").on("click",'.sub',function(){
              
                if($(this).next('.num').val()==1){
                  return;
                }

                $(this).next('.num').val($(this).next('.num').val()-1)
                totalROW(this)
            })  
            
            $("#tab").on("click",'.add',function(){
              
              $(this).prev('.num').val(parseInt($(this).prev('.num').val())+1)

              totalROW(this)
          })  

          function totalROW(obj){
           let num=$(obj).parents("tr").children("td").eq(3).children(".num").val();
           let price=$(obj).parents("tr").children("td").eq(4).text();
           $(obj).parents("tr").children("td").eq(5).text(num*price)
           let data=new URLSearchParams()
           data.append("cid",$(obj).parents("tr").children("td").eq(0).text());
           data.append("pnumber",num);

           axios({
            url:"/cart/modify",
            method:"post",
            data:data
         }).then(function(res){
             console.log(res)     
             layer.msg(res.data.msg)    
         })
          }
        })
         

</script>
    </body>
</html>